<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            width: 550px;
            height: 550px;
            background-color: white;
            margin: 0 auto;
        }

        .small {
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
        }

        .small .checkbox {
            display: block;
        }

        .small input {
            /* display: block; */
            /* width: 400px; */
            /* float: left; */
            display: inline-block;
            margin-bottom: 10px;
        }

        .small p {
            /* float: left; */
            display: inline-block;
            /* width: 20px;
            height: 20px; */
            margin: auto;
        }
    </style>
</head>

<body>
    <!-- ## 4、表单的验证（以下是需求）
    -  【1】验证账号
        - 用户名不能为空
        - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
        - 必须以字母开头
        - 长度6-20
    -  【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ 
    -  【3】电子邮件
          + 163邮箱：
          + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
          + @后面的域名只能是163
          + 域名后缀（.com .cn .net）可以有多个。
    
      【4】身份证 18位数 后面以为可能是 X x
    
    - 【5】手机号码
    - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
    
    - 【6】生日验证
      + 1999/05/08
      + 1999-05-08
      + 19990508
    
    - 【7】密码  
      + 长度小于20 
      + 不能包含空格 密码不一致能不能提交 -->
    <div class="big">
        <div class="small">
            <h1>用户注册</h1>
            <div>账号<input type="text" class="users" value="">
                <p class="p1"></p>
            </div>
            <div>昵称<input type="text" class="name" value="">
                <p class="p2"></p>
            </div>
            <div>电子邮件<input type="text" class="email" value="">
                <p class="p3"></p>
            </div>
            <div>身份证<input type="text" class="id" value="">
                <p class="p4"></p>
            </div>
            <div>手机号码<input type="text" class="phone" value="">
                <p class="p5"></p>
            </div>
            <div>生日<input type="text" class="birthday" value="">
                <p class="p6"></p>
            </div>
            <div>密码<input type="text" class="password" value="">
                <p class="p7"></p>
            </div>
            <div>确认密码<input type="text" class="querenpassword" value="">
                <p class="p8"></p>
            </div>
            <div class="checkbox"><input type="checkbox">十天内免登录</div>
            <input type="button" value="确定" class="queding">
            <input type="button" value="清空" class="delete">
        </div>

    </div>

    <script>
        var users = document.querySelector('.users')
        var names = document.querySelector('.name')
        var email = document.querySelector('.email')
        var id = document.querySelector('.id')
        var phone = document.querySelector('.phone')
        var birthday = document.querySelector('.birthday')
        var password = document.querySelector('.password ')

        users.onblur = function () {
            var reg_users = /^[a-z0-9-_]{6,20}$/i;
            var target = reg_users.test(users.value)
            console.log(target);
            var p1 = document.getElementsByClassName('p1');
            console.log(p1);

            if (target) {
                p1[0].innerHTML = '输入正确';

            } else {
                p1[0].innerHTML = '输入有误';
            }
        }
        names.onblur = function () {
            var reg_name = /^[\u4e00-\u9fa5]{3,6}$/;
            var target = reg_name.test(name.value)
            var p2 = document.getElementsByClassName('p2');
            console.log(p2);
            if (target) {
                p2[0].innerHTML = '输入正确';

            } else {
                p2[0].innerHTML = '输入有误';
            }
        }
        email.onblur = function () {
            var reg_email = /^[0-9a-zA-Z]{5,12}@(163|126|qq)\.(sina|cn|com|net)$/;
            var target = reg_email.test(email.value)
            var p3 = document.getElementsByClassName('p3');
            console.log(p3);
            if (target) {
                p3[0].innerHTML = '输入正确';

            } else {
                p3[0].innerHTML = '输入有误';
            }
        }
        /* id.onblur = function () {
            var reg_id = ;
            var target = reg_id.test(id.value)
            var p4 = document.getElementsByClassName('p4');
            console.log(p4);
            if (target) {
                p4[0].innerHTML = '输入正确';

            } else {
                p4[0].innerHTML = '输入有误';
            }
        } */
        phone.onblur = function () {
            var reg_phone = /^1[356789]\d{9}$/;
            var target = reg_phone.test(phone.value)
            var p5 = document.getElementsByClassName('p5');
            console.log(p5);
            if (target) {
                p5[0].innerHTML = '输入正确';

            } else {
                p5[0].innerHTML = '输入有误';
            }
        }
        birthday.onblur = function () {
            var reg_birthday =/^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/;
            var target = reg_birthday.test(birthday.value)
            var p6 = document.getElementsByClassName('p6');
            console.log(p6);
            if (target) {
                p6[0].innerHTML = '输入正确';

            } else {
                p6[0].innerHTML = '输入有误';
            }
        }
        password.onblur = function () {
            var reg_password =/^[a-z0-9]{8,20}$/i;
            var target = reg_password.test(password.value)
            var p7 = document.getElementsByClassName('p7');
            console.log(p7);
            if (target) {
                p7[0].innerHTML = '密码有效';

            } else {
                p7[0].innerHTML = '密码有误';
            }
        }
    </script>
</body>

</html>